<script>
	function show_video(file){		
		flowplayer("player", "/site_media/flowplayer-3.2.2.swf", {
			clip: {
				url: file,
				provider: 'h264streaming',
				autoPlay:true,
				autoBuffering:true,
				scaling: "scale"
			},
			plugins: {
				h264streaming: {
					url: '/site_media/flowplayer.pseudostreaming-3.2.2.swf'
				},
				controls: {
					url: '/site_media/flowplayer.controls-3.2.1.swf',
					play:true,
					stop:true,
					scrubber: true
				}
			}
		});	
	}
	
	$().ready(function (){
		show_video('/');
	});
	
	function set_for_project(movie){		
		location.href = '/project/{{project_id}}/video/artist/{{artist_id}}/?movie=' + movie;
	}
</script>

<div style="position:relative;">
	<div style="float:left;width:170px;height:400px;  word-wrap:break-word; OVERFLOW:auto; overflow-x:hidden; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222;">	  
	{% for video in videos %}
		<a href="javascript:;" title="click to play!"
			onclick="show_video('/{{video.movie}}');"
			 >
			{% load zdy_filter %}
			<img src="/{{video.movie|get_file_name}}.jpg" height="100"><br/>		
		</a> <input type="button" value="Set this" onclick="set_for_project('{{video.movie}}');"><br/><br/>
	{% endfor %}
	</div>
	
	<div id='player' style="float:left;left:10px;height:400px;width:580px;">
		<div style='position:absolute;left:300px;top:200px;'><strong>Click the image to play!</strong></div>
	</div>
</div>